{extend name='table'}

{block name='button'}
<button data-table-id="ParkingTable" data-modal='{:url("add")}' class='layui-btn layui-btn-sm layui-btn-primary'>添加停车记录</button>
<button data-table-id="ParkingTable" data-action='{:url("delete")}' data-rule="id#{id}" data-confirm="确定要批量删除停车记录吗？" class='layui-btn layui-btn-sm layui-btn-primary'>批量删除</button>
{/block}

{block name="content"}
<div class="think-box-shadow">
    <fieldset>
        <legend>{:lang('条件搜索')}</legend>
        <form class="layui-form layui-form-pane form-search" action="{:url()}" onsubmit="return false" method="get" autocomplete="off">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">车牌号</label>
                <label class="layui-input-inline">
                    <input name="plate_number" value="{$get.plate_number|default=''}" placeholder="请输入车牌号" class="layui-input">
                </label>
            </div>
            <div class="layui-form-item layui-inline">
                <button type="submit" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
            </div>
        </form>
    </fieldset>
    <table id="ParkingTable" data-url="{:url('get')}" data-line="3" data-target-search="form.form-search"></table>
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        $('#ParkingTable').layTable({
            even: true, height: 'full',
            sort: {field: 'id', type: 'desc'},
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', hide: true},
                {field: 'plate_number', title: '车牌号', minWidth: 120},
                {field: 'entry_time', title: '进入时间', minWidth: 150, templet: function (d) {
                    return new Date(d.entry_time).toLocaleString();
                }},
                {field: 'exit_time', title: '离开时间', minWidth: 150, templet: function (d) {
                    return d.exit_time ? new Date(d.exit_time).toLocaleString() : '-';
                }},
                {field: 'free_hours', title: '免费时长', minWidth: 100},
                {field: 'fee', title: '费用', minWidth: 100},
                {field: 'payment_status', title: '支付状态', minWidth: 100, templet: function (d) {
                    return d.payment_status ? '已支付' : '未支付';
                }},
                {field: 'payment_time', title: '付款时间', minWidth: 180, templet: function (d) {
                    return d.payment_time ? new Date(d.payment_time).toLocaleString() : '-';
                }},
                {field: 'is_exited', title: '是否离场', minWidth: 100, templet: function (d) {
                    return d.is_exited==2 ? '已离场' : '在场';
                }},
                {field: 'type', title: '类型', minWidth: 100, templet: function (d) {
                    let types = {1: '员工', 2: '访客', 3: '临时车辆'};
                    return types[d.type] || '-';
                }},
                {toolbar: '#toolbar', title: '操作', minWidth: 200}
            ]]
        });
    });
</script>

<!-- 数据操作工具条模板 -->
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-primary layui-btn-sm" data-event-dbclick data-title="查看详情" data-modal='{:url("view")}?id={{d.id}}'>查看</a>
    <a class="layui-btn layui-btn-primary layui-btn-sm" data-event-dbclick data-title="编辑数据" data-modal='{:url("edit")}?id={{d.id}}'>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-confirm="确定要删除数据吗?" data-action="{:url('delete')}" data-value="id#{{d.id}}">删除</a>
</script>
{/block}
